<template>
   <a-row>
   <!-- 左边列 -->
   <a-col :span="6">
    <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}&nbsp;&nbsp;&nbsp;<plus-outlined @click="showPlusModal"/></span>
    </a-row>

    <!-- 页面内容区 -->
    <a-row>
<!--
    <a-dropdown trigger="click" :key="fun.name" overlayClassName="ant-dropdown">
    <a class="ant-dropdown-link" @click.prevent>
      <CaretDownOutlined />{{ fun.name }}
    </a>
    <template #overlay>
      <div style="margin-left: 30px;">
      <div style="font-size: 18px;" v-for="child in fun.child">{{child.name}}</div>
      </div>
    </template>
    </a-dropdown> -->

    <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :tree-data="treeData"
    style="font-size: 18px;margin-left: 30px;" @select="">
    </a-tree>

    </a-row>

   </a-col>
   <!-- 右边列 -->
   <a-col :span="18">
    <a-row style="margin: 3% 0px 1% 0px;">
      <a-col :span="6"><a-input v-model:value="value" placeholder="请输入员工名/员工号"></a-input></a-col>
      <a-col :span="4">&emsp;<a-button type="primary" size="middle" @click="">查询</a-button></a-col>
    </a-row>

    <a-row>
    <!-- 表格 -->
    <a-table :columns="columns" :data-source="data" :scroll="{ x: 800 }">
      <!-- 主体部分 -->
      <template #bodyCell="{ column, record }" style="color: black;">
        <template v-if="column.key === 'funID'">
          <a style="color: black;">{{ record.id }}</a>
        </template>
        <template v-else-if="column.key === 'funName'">
          <a style="color: black;">{{ record.name }}</a>
        </template>
        <template v-else-if="column.key === 'visiable'">
          <a style="color: black;">{{ record.visiable }}</a>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a>编辑</a>
            <a-divider type="vertical" />
            <a style="color: red;">删除</a>
          </span>
        </template>
      </template>

    </a-table>


    </a-row>


   </a-col>
  </a-row>

</template>

<script setup>
import { computed,ref } from 'vue';
import { useRoute } from 'vue-router';
import { PlusOutlined } from "@ant-design/icons-vue";
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
// 计算属性，获取当前路由的元数据中的标题
const routeName = computed(() => route.meta.title);

const expandedKeys = ref([]);
const selectedKeys = ref([]);
const treeData = ref([
  {title: '销售管理平台',key: '0-0',
     children: [
      {title: 'Web端应用',key: '0-0-0',disabled: true},
      {title: '客户端',key: '0-0-1',},
    ],
  },
  {title: '群利多',key: '2-0',
    children: [
      {title: 'Web端应用',key: '2-0-0'},
      {title: '客户端',key: '2-0-1',},
    ],
  },
  {title: 'AI称管理平台', key: '3-0',
     children: [
       {title: 'Web端应用',key: '3-0-0'},
      {title: '客户端',key: '3-0-1',},
    ],},
]);



const columns = [
  {title: '功能编号',dataIndex: 'funID',key: 'funID',width: '30%'},
  {title: '功能名称',dataIndex: 'funName',key: 'funName',width: '15%'},
  {title: '是否可见',dataIndex: 'visiable',key: 'visiable',width: '15%'},
  {title: '操作',dataIndex: 'action',key: 'action',width: '40%'}];

const data = [
  {key: '1',id: 10010,name: '张三',visiable:'可见'},
  { key: 15, id: 10011, name: '张三丰', visiable: '不可见' },
  { key: 13, id: 10012, name: '张设计', visiable: '不可见' },
  { key: '2', id: 10096, name: '李四', visiable: '可见' },
  { key: 11, id: 10097, name: '李思源', visiable: '不可见' },
  { key: 12, id: 10098, name: '李四西', visiable: '不可见' },
  {key: '3',id: 10086,name: 'Joe Black',visiable:'可见'},
];

</script>

<style lang="less" scoped>

.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
  .console-card{
  height: 40vh;
  width: 40%;
  margin-top: -3%;
  border: 3px solid #969696;
  box-shadow: 0 0 10px rgba(40, 40, 40, 0.5);
  }

}
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
    }
</style>
